<template>
  <div ref="gantt"></div>
</template>

<script>
import { gantt } from 'dhtmlx-gantt';
import "dhtmlx-gantt/codebase/dhtmlxgantt.css";
import moment from "moment";
import { getGanttListFromService } from '@/api/zone/gantt';

export default {
  name: 'gantt',
  props: {
    tasks: {
      type: Object,
      default() {
        return { data: [], links: [] }
      }
    }
  },
  // created() {
  //   getGanttListFromService().then(response => {
  //                this.tasks=response.data;                 //console.log(gantt);

  //               // Gantt.clearAll();
  //               // Gantt.parse(response.data);
  //               // return response.data;

  //           });
  // },
  mounted: function () {
    //日期格式化
    gantt.config.xml_date = "%Y-%m";

    gantt.config.scale_unit = "month";   //按月显示
    gantt.config.date_scale = "1";      //设置时间刻度的格式（X轴） 多个尺度

    gantt.config.scale_height = 50; //设置时间刻度的高度和网格的标题

    gantt.config.subscales = [
    //{unit:"week", step:1, date:"%W"},
    { unit: "month", step: 1, date: "%M" },
    {unit:"week",  step:1, date:"%W" },
    {unit:"day",  step:1, date:"%D" }

    ];          //指定第二个时间刻度
    //左侧是否自适应
    gantt.config.autofit = true;
    //左侧宽
    gantt.config.grid_width = 200;
    //取消连线
    gantt.config.drag_links = false;
    //只读
    gantt.config.readonly = false;
    //右侧显示列名
    gantt.config.date_scale = "%Y-%m-%d";
    //自动调整图表坐标轴区间用于适配task的长度
    gantt.config.fit_tasks = true;
    //弹窗宽
    gantt.config.wide_form = false;
    //图表刷新后位置不变
    gantt.config.preserve_scroll = true;
    gantt.config.round_dnd_dates = true;

    gantt.config.start_date = new Date(2024, 6 ,15);//表头刻度 有start必须有end !加了会导致无法展开
    gantt.config.end_date = new Date(2024, 8 ,15 );
    //汉化
    gantt.locale = {
      date: {
        month_full: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12"],
        month_short: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
        day_full: ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"],
        day_short: ["日", "一", "二", "三", "四", "五", "六"]
      },
      labels: {
        dhx_cal_today_button: "今天",
        day_tab: "日",
        week_tab: "周",
        month_tab: "月",
        new_event: "新建日程",
        icon_save: "保存",
        icon_cancel: "关闭",
        icon_details: "详细",
        icon_edit: "编辑",
        icon_delete: "删除",
        confirm_closing: "请确认是否撤销修改!", //Your changes will be lost, are your sure?
        confirm_deleting: "是否删除计划?",
        section_description: "任务内容:",
        section_time: "时间范围:",
        section_type: "类型",
        section_text: "任务名称:",
        section_color: "颜色:",

        /* grid columns */

        column_text: "项目节点名称",
        column_start_date: "开始时间",
        column_duration: "持续时间",
        column_add: "",

        /* link confirmation */

        link: "关联",
        confirm_link_deleting: "将被删除",
        link_start: " (开始)",
        link_end: " (结束)",

        type_task: "任务",
        type_project: "项目",
        type_milestone: "里程碑",

        minutes: "分钟",
        hours: "小时",
        days: "天",
        weeks: "周",
        months: "月",
        years: "年"
      }
    }
    //左侧显示列名
    gantt.config.columns = [
      { name: "text", label: "任务名称", tree: true, width: '*' },
      { name: "start_date", label: "开始时间", align: "center" }//,
      //{ name: "end_date", label: "结束时间", align: "center" },
      //{   name: "progress", label: "进度", align: "center",
      //   template: function (obj) {
      //     return (Math.floor(obj.progress * 100)).toString() + '%'
      //   }
      // },
      // { name: "add", label: "" },
      
    ];
    //弹出层
    gantt.config.lightbox.sections = [
      { name: "text", height: 70, map_to: "text", type: "textarea", focus: true, width: 200 },
      { name: "time", height: 30, map_to: "auto", type: "time", time_format: ["%Y", "%m", "%d"] },
      {
        name: "color", height: 30, map_to: "color", type: "select", options: [
          { key: "#3db9d3", label: "蓝色" },
          { key: "#33cc33", label: "绿色" },
          { key: "#FF8247", label: "橙色" },
          { key: "#ff6633", label: "红色" }
        ]
      },
      { name: "description", height: 70, map_to: "description", type: "textarea" }
    ];
    //弹窗标题 日期范围
    gantt.templates.task_time = function (start, end, task) {
      return moment(start).format('YYYY-MM-DD') + " - " + moment(end).format('YYYY-MM-DD');
    };
    //弹窗标题 计划名称
    gantt.templates.task_text = function (start, end, task) {
      return task.text;
    };
    gantt.init(this.$refs.gantt);
    gantt.parse(this.$props.tasks);
    let this_ = this
    //添加后触发
    gantt.attachEvent("onAfterTaskAdd", function (id, item) {
      console.log("添加后触发");
      this_.changeTask();
    });
    //移动进度后触发
    gantt.attachEvent("onAfterTaskDrag", function (id, mode, e) {
      console.log("移动进度后触发");
      this_.changeTask();
    });
    //移动任务后触发
    gantt.attachEvent("onAfterTaskMove", function (id, parent, tindex) {
      console.log("移动任务后触发");
      this_.changeTask();
    });
    //删除任务后触发
    gantt.attachEvent("onAfterTaskDelete", function (id, item) {
      console.log("删除任务后触发");
      this_.changeTask();
    });
    //修改任务后触发
    gantt.attachEvent("onAfterTaskUpdate", function (id, item) {
      console.log("修改任务后触发");
      this_.changeTask();
    })
    //保存验证
    gantt.attachEvent("onLightboxSave", function (id, item) {
      if (!item.text) {
        gantt.message({ type: "error", text: "请填写任务名称!" });
        return false;
      }
      return true;
    });
  }
}
</script>